<template>
  <div>
    <nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
      <a class="navbar-brand" href="#">复训记录</a>
      <ul class="navbar-nav ml-auto">
        <li class="nav-item">
          <button type="button" class="btn btn-dark" @click="$router.push('edit')">添加</button>
        </li>
      </ul>
    </nav>
    <nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-bottom">
      <span class="navbar-text">Navbar text</span>
    </nav>
    <div class="table-container">
      <table class="table table-hover">
        <thead>
          <tr>
            <th>姓名</th>
            <th>复训日期</th>
            <th>类型</th>
            <th>内容</th>
            <th>时长</th>
            <th>考官</th>
            <th>记录日期</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody v-if="isReady">
          <tr v-for="line in mainData" :key="line.id">
            <td>{{line.name}}</td>
            <td>{{line.date}}</td>
            <td>{{toType(line.type)}}</td>
            <td>{{line.title}}</td>
            <td>{{line.duration}}小时</td>
            <td>{{line.examiner}}</td>
            <td>{{line.time}}</td>
            <td>
              <div class="btn-group btn-group-sm" v-show="delConfirm != line.identifier">
                <button
                  type="button"
                  class="btn btn-outline-dark btn-sm"
                  @click="window.console.log('edit: '+line.identifier.toString())"
                >修改</button>
                <button
                  type="button"
                  class="btn btn-outline-dark btn-sm"
                  @click="delConfirm=line.identifier"
                >删除</button>
              </div>
              <div class="btn-group btn-group-sm" v-show="delConfirm == line.identifier">
                <button
                  type="button"
                  class="btn btn-outline-dark btn-sm"
                  @click="delData(line.identifier)"
                >确定</button>
                <button
                  type="button"
                  class="btn btn-outline-dark btn-sm"
                  @click="delConfirm = -1"
                >取消</button>
              </div>
            </td>
          </tr>
        </tbody>
      </table>
      <div class="alert alert-info" v-if="!isReady">
        <strong>数据加载中，</strong> 请稍等……
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "RecordView",
  data() {
    return {
      typeStrings: ["模拟机复训", "理论复训", "模拟机考核", "理论考核"],
      delConfirm: -1
    };
  },
  computed: {
    devMode() {
      return this.$store.state.devMode;
    },
    mainData() {
      return this.$store.state.mainData;
    },
    isReady() {
      return this.$store.state.isReady;
    }
  },
  methods: {
    delData(identifier) {
      window.console.log("del: " + identifier.toString());
      this.delConfirm = -1;
    },
    toType(i) {
      return this.typeStrings[i - 1];
    }
  },
  created() {
    this.$store.dispatch("loadData");
  }
};
</script>

<style scoped>
table {
  width: 100%;
}
</style>